<template>
	<div class="block text-center">
		<el-carousel height="800px" :autoplay="true" :interval="3000">
			<el-carousel-item v-for="(item, index) in carouselItems" :key="index">
				<el-image :src="item.imgSrc" style="width: 100%; height: 125%" :alt="'Image ' + (index + 1)"
					fit="fill" />
				<div class="carousel-caption">
					<div class="carousel-caption-content" style="max-width: 900px;">
						<h4 class="subtitle">{{ item.title }}</h4>
						<h1 class="main-title">{{ item.subtitle }}</h1>
						<p class="description">{{ item.description }}</p>
						<div class="bottom">
							<a class="btn-custom primary" :href="item.joinLink">加入我们</a>
							<a class="btn-custom secondary" :href="item.readMoreLink">了解更多</a>
						</div>
					</div>
				</div>
			</el-carousel-item>
		</el-carousel>
	</div>
	<!-- Carousel End -->

	<!-- Team Start -->

	<div class="team">
		<h1 class = "team-desc">师资队伍——特级教师</h1>
		<div class="main-team-table">
			<div class="sub-team-table" v-for="(member, index) in teamMembers" :key="index">
				<el-card>
					<el-image :src="member.imgSrc" class=" " :alt="member.name" fit="cover" />
					<template #footer>
						<div class="team-member-name">{{ member.name }} - {{ member.role }}</div>
					</template>
				</el-card>
			</div>
			<div class="team-icons">
				<span class="icon"><font-awesome-icon :icon="['fab', 'facebook-f']" /></span>
				<span class="icon"><font-awesome-icon :icon="['fab', 'twitter']" /></span>
				<span class="icon"><font-awesome-icon :icon="['fab', 'instagram']" /></span>
				<span class="icon"><font-awesome-icon :icon="['fab', 'linkedin-in']" /></span>
			</div>
		</div>

	</div>
	<!-- Team End -->

	<!-- Back to Top -->
	<div class="back-to-top-button" @click.prevent="scrollToTop">
		<font-awesome-icon icon="arrow-up" />
	</div>

</template>

<style scoped>
	/* 	@import "@/assets/css/style.css"; */
	@import "@/assets/css/bootstrap.min.css";
	
	.team-desc{
		margin-top: 2.5% ;
		font-weight: bold;
	}
	
	.block {
		text-align: center;
	}

	.carousel-caption {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		height: 100%;
		/* 使容器的高度为视口高度 */
	}

	.carousel-caption-content {
		max-width: 900px;
	}

	.subtitle {
		
		color: #475669;
		text-transform: uppercase;
		margin-top: 0px;
		letter-spacing: 0px;
		font-size: 60px;
		/* 调整字体大小 */
		animation: fadeInUp 1s;
		font-weight: bold;
	}

	.main-title {
		color: #ffffff;
		text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000;
		margin-top: 10%;
		margin-bottom: 5%;
		text-transform: capitalize;
		margin-bottom: 1rem;
		font-size: 80px;
		/* 调整标题大小 */
		animation: fadeInUp 1s;
		font-weight: bolder;
	}

	.description {
		font-size: 1.25rem;
		color: white;
		/* 调整描述文本颜色 */
		animation: fadeInUp 1s;
		font-weight: bold;
		text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000;
		margin-bottom: 5%;
	}

	.bottom {
		padding-top: 0.5rem;
	}

	.btn-custom {
		display: inline-block;
		padding: 0.75rem 2rem;
		border-radius: 50px;
		text-decoration: none;
		font-size: 1rem;
		text-align: center;
		transition: background-color 0.3s, transform 0.3s;
		margin: 0.5rem;
	}

	.btn-custom.primary {
		background-color: orangered;
		color: #fff;

		cursor: pointer;
		transition: all 0.3s ease;
	}

	.btn-custom.secondary {
		background-color: darkred;
		color: #fff;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.btn-custom:hover {
		box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
		background-color: darkorange;
	}
	
	.btn-custom:active {
	  transform: translateY(-2px);
	  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translate3d(0, 100%, 0);
		}

		to {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n + 1) {
		background-color: #d3dce6;
	}

	.team {
		background-color: rosybrown;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 850px;
	}

	.main-team-table {
		margin-top: 1%;
		padding-top: 3%;
		margin-bottom: 7%;
		background-color: lavenderblush;
		/* 	background-color: gainsboro; */
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
		/* Adjust spacing between cards as needed */
	}

	.sub-team-table {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 20%;
	}

	.team-icons {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: lavenderblush;
		/* 背景颜色设置为蓝色 */
		padding: 20px;
		/* 增加一些内边距 */
	}

	.icon {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: sandybrown;
		/* 图标背景颜色设置为红色 */
		border-radius: 50%;
		width: 50px;
		/* 图标的宽度 */
		height: 50px;
		/* 图标的高度 */
		margin: 0 10px;
		/* 图标之间的间距 */
		color: #000000;
		/* 图标颜色设置为黑色 */
	}

	.icon svg {
		width: 20px;
		/* 图标的实际尺寸 */
		height: 20px;
	}

	.team-member-name {
		text-align: center;
		font-size: 23px;
		/* Adjust the font size */
		font-family: 'Cursive', 'Arial', sans-serif;
		/* Adjust the font family for artistic feel */
		font-weight: bold;
		/* Make the text bold */
		color: #333;
		/* Adjust the text color */
	}

	.back-to-top-button {
		position: fixed;
		bottom: 50px;
		right: 50px;
		width: 70px;
		height: 70px;
		border-radius: 50%;
		background-color: palevioletred;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 48px;
		cursor: pointer;
		transition: background-color 0.3s, transform 0.3s;
		z-index: 1000;
	}

	.back-to-top-button:hover {
		background-color: #fff;
		color: palevioletred;
		transform: translateY(-10px);
	}
</style>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		FontAwesomeIcon
	} from '@fortawesome/vue-fontawesome';
	import {
		faArrowUp
	} from '@fortawesome/free-solid-svg-icons';
	import {
		library
	} from '@fortawesome/fontawesome-svg-core';
	import {
		faFacebookF,
		faTwitter,
		faInstagram,
		faLinkedinIn
	} from '@fortawesome/free-brands-svg-icons';


	library.add(faFacebookF, faTwitter, faInstagram, faLinkedinIn);


	// 添加图标到库
	library.add(faArrowUp);

	const carousel = ref(null);


	const scrollToTop = () => {
		window.scrollTo({
			top: 0,
			behavior: 'smooth'
		});
	}


	// 定义轮播项的数据
	const carouselItems = [{
			imgSrc: '/img/main-1.jpg', // 替换为实际的图片路径
			title: "读书会",
			subtitle: '阅读改变生活',
			description: "阅读不仅丰富了我们的知识，还让我们有了更多的思考与感悟。",
			joinLink: '#',
			readMoreLink: '#',
		},
		{
			imgSrc: '/img/main-2.jpg', // 替换为实际的图片路径
			title: "户外教学",
			subtitle: '课堂外的精彩',
			description: "通过户外教学活动，我们不仅能学到课堂上无法学到的知识，还能亲近大自然。",
			joinLink: '#',
			readMoreLink: '#',
		},
		{
			imgSrc: '/img/main-3.jpg', // 替换为实际的图片路径
			title: "篮球比赛",
			subtitle: '激情与团队精神',
			description: "篮球比赛不仅锻炼了我们的身体，更培养了我们的团队合作精神和竞争意识。",
			joinLink: '#',
			readMoreLink: '#',
		},
	];


	// 定义团队成员的数据
	const teamMembers = [{
			imgSrc: '/img/team-1.jpg', // 替换为实际的图片路径
			name: '王子秦',
			role: '数学老师',
			delay: '0.1s',
		},
		{
			imgSrc: '/img/team-2.jpg', // 替换为实际的图片路径
			name: '王爷',
			role: '物理老师',
			delay: '0.3s',
		},
		{
			imgSrc: '/img/team-3.jpg', // 替换为实际的图片路径
			name: '周树人',
			role: '语文老师',
			delay: '0.5s',
		},
		{
			imgSrc: '/img/team-4.jpg', // 替换为实际的图片路径
			name: 'Michael Brown',
			role: '英文老师',
			delay: '0.7s',
		}
	];
</script>